import React, { useState, useEffect } from 'react'
import { Arrow } from '@react-vant/icons'
import { DownOutline, SearchOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom';
import { Search } from 'react-vant';
// 引入公共组建-公告
import Header from '../../components/Header/header-gong'
import styles from './index.module.css'
import { Tabs } from 'antd-mobile'
import http from '../../utils/http'
const Index: React.FC = () => {
  const navigate = useNavigate()
  const [foryouList, setForyouList] = useState([])
  const [catalist, setCatalist] = useState([])
  const [pageCode] = useState(1)
  const [pageSize] = useState(4)
  const [doctorpageCode] = useState(1)
  const [doctorpageSize] = useState(2)
  const [yaolist, setYaolist] = useState([])
  const [city, setcity] = useState('上海')
  const cityinfor = localStorage.getItem('city')
  useEffect(() => {
    if (cityinfor) {
      setcity(cityinfor)
    }
  }, [cityinfor])
  const shang = () => {
    navigate("/city");
  };
  const Toser = () => {
    navigate("/search");
  };
  const ToExpert = ()=>{
    navigate("/expert");
  }

  interface Doctor {
    id: string;
    doctorname: string;
    doctorstate: string;
    sococity: string;
    socoadmin: string;
    socodescword: string;
    doctorgood: number;
    doctortime: number;
    doctorbrowse: number;
    doctorprice: number;
    socoimage: string;
    socolv: string;
  }
  // 跳医生详情页
  const toDetail = (item: Doctor) => {
    navigate(`/doctor/` + item.id, { state: item })
  }

  const [list, setList] = useState([]);
  //调取接口
  const fetchData = async () => {
    const res = await http.get("/doctor/list", {
      params: {
        pageCode: doctorpageCode,
        pageSize: doctorpageSize
      }
    });
    const { code, data } = res.data;
    if (code === 20000) {
      setList(data);
    }
  };
  // 我要买药分类接口
  const maiyao = () => {
    http.get('/restorative/type').then(res => {
      const { code, data } = res.data
      if (code === 200) {
        setCatalist(data)
      }
    })
  }
  // 我要买药数据接口
  const getmaiyaolist = () => {
    http.get('/restorative/list', {
      params: {
        pageCode: pageCode,
        pageSize: pageSize
      }
    }).then((result) => {
      const { data, code } = result.data
      if (code === 200) {
        setYaolist(data)
      }
    })
  }
  const getdoctor = () => {
    // 获取推荐医生
    http.get("/book/list").then((res) => {
      const { code, data } = res.data;
      if (code === 20000) {
        setForyouList(data);
      }
    })
  }
  useEffect(() => {
    fetchData();
    maiyao()
    getdoctor()
    getmaiyaolist()
  }, []);
  // 跳转详情

  interface ForYou {
    textid: string;
    texttitle: string;
    textdescword: string;
    texttype: string;
    doctorimage: string;
    doctorname: string;
    doctorstate: string;
  }
  const toforyouxiang = (item: ForYou) => {
    // 跳转到为你推荐详情页面，并传递医生id作为路由参数
    navigate(`/toforyoudeilte/${item.textid}`);
  };
  interface Restorative {
    restorativesid: string;
    restorativesname: string;
    restorativesdesc: string;
    restorativesprice: number;
    restorativesimage: string;
  }
  // 跳转买药的详情页
  const tobuydetail = (item: Restorative) => {
    navigate(`/buymedicineDetail/${item.restorativesid}`)
  }
  interface RestorativeType {
    restorativesstateid: string;
    restorativesstatename: string;
  }
   const [value, setValue] = useState('');
  return (
    <div>
      {/* 妙手医生，妙手互联网  点击上海条转*/}
      <div className={styles.home_header}>
        <div className={styles.miaoshou_doctor}>
          <h2>妙手医生</h2>
          <h3>妙手互联网医院</h3>
          <h3 onClick={shang}>
            {city} <DownOutline />
          </h3>
        </div>
        {/* 首页搜索 */}
      
      
          <Search  value={value} onFocus={Toser}  background='linear-gradient(to bottom,#608af2,#95b2f5)' clearable placeholder=" 搜索医生、医院、药品、疾病症状" />
        </div>
  
      {/* 公共组建 */}
      <div className={styles.hezi}>
        <Header />
      </div>

      {/* 我要问专家 */}
      <div className={styles.expert}>
        <h3>
          我要问专家 <li onClick={ToExpert}>更多&gt;</li>
        </h3>
        {/* tab切换 */}
        <Tabs defaultActiveKey="1">
          <Tabs.Tab title="妇产科" key="1">
            {list.map((item: Doctor, index) => (
              <div className={styles.doctor} key={index} onClick={() => toDetail(item)}>
                {/* 医生头像 */}
                <div className={styles.doctor_information}>
                  <div className={styles.avatar}>
                    <img src={item.socoimage} alt="" />
                  </div>
                </div>
                {/* 医生信息 */}
                <div className={styles.doctor_name}>
                  <p>
                    <li className={styles.name}>{item.doctorname}</li>
                    <li className={styles.post}>{item.doctorstate}</li>
                    <li className={styles.logo}>{item.socolv}</li>
                  </p>
                  <p>
                    <li className={styles.hospital}>{item.sococity}</li>
                    <li className={styles.ke}>{item.socoadmin}</li>
                  </p>
                  <div className={styles.type}>
                    <li className={styles.photo}>图文咨询</li>
                    <li className={styles.phone}>电话咨询</li>
                    <li className={styles.video}>视频咨询</li>
                  </div>
                  {/* 擅长 */}
                  <div className={styles.good}>擅长：{item.socodescword}</div>
                  <div className={styles.assessment}>
                    <li>
                      好评率 <span className={styles.color}>{item.doctorgood}%</span>
                    </li>
                    <li>
                      锦旗 <span className={styles.color}>{item.doctortime}</span>
                    </li>
                    <li>
                      浏览人次{" "}
                      <span className={styles.color}>{item.doctorbrowse}</span>
                    </li>
                  </div>
                  {/* 价格 */}
                  <div className={styles.about_price}>
                    <div className={styles.price}>
                      <div className={styles.price_num}>
                        <li className={styles.q}>￥</li>
                        <li className={styles.num}>{item.doctorprice}</li>
                        <li className={styles.qi}>起</li>
                      </div>
                      <button>问医生</button>
                    </div>
                  </div>
                </div>
                <div className={styles.ce}></div>
              </div>
            ))}
          </Tabs.Tab>
          <Tabs.Tab title="儿科" key="2">
            2
          </Tabs.Tab>
          <Tabs.Tab title="皮肤科" key="3">
            3
          </Tabs.Tab>
          <Tabs.Tab title="心血管内科" key="4">
            4
          </Tabs.Tab>
          <Tabs.Tab title="呼吸科" key="5">
            5
          </Tabs.Tab>
          <Tabs.Tab title="消化科" key="6">
            6
          </Tabs.Tab>
          <Tabs.Tab title="神经科" key="7">
            7
          </Tabs.Tab>
        </Tabs>
      </div>

      {/* 我要买药 */}
      <div className={styles.maiyao}>
        <div className={styles.maiyao_title}>
          <div style={{ display: 'flex' }}>
            <h2 style={{ marginLeft: '10px', width: '35vw' }}>我要买药</h2>
            <p style={{ fontSize: '15px', color: 'rgb(153, 153, 153)', marginLeft: '140px' }} onClick={() => navigate('/buymedicine')}>更多<Arrow /></p>
          </div>
          <div style={{ marginTop: '10px' }}>
            <Tabs defaultActiveKey='1'>
              {
                catalist.map((item: RestorativeType) => {
                  return <Tabs.Tab title={item.restorativesstatename} key={item.restorativesstateid}>
                    <div style={{ display: 'flex', flexWrap: 'wrap' }} >
                      {
                        yaolist.map((item: Restorative, index) => {
                          return <div key={index} style={{ margin: '10px', flex: '2', width: '128px'}} onClick={() => tobuydetail(item)}>
                            <img src={item.restorativesimage} style={{ width: "144px",     height: "190px" }} />
                            <p><span style={{ width: '40px', height: '16px', display: 'inline-block', backgroundColor: 'rgb(89, 208, 107)', color: '#fff', lineHeight: '16px', fontSize: '12px', textAlign: 'center', borderRadius: '5px' }}>OTC</span>{item.restorativesname}</p>
                            <p style={{ width: '144px', height: '32px', overflow: 'hidden', textOverflow: 'ellipsis' }}>{item.restorativesdesc}</p>
                            <p style={{ color: 'orangered', fontSize: '16px' }}>￥{item.restorativesprice}</p>
                          </div>
                        })
                      }
                    </div>
                  </Tabs.Tab>
                })
              }
            </Tabs>
          </div>
        </div>
        <button onClick={() => navigate('/buymedicine')} style={{ width: '100%', height: '48px', color: '#4188da', fontSize: '16px', textAlign: 'center', lineHeight: '64px', border: 'none', background: 'none' }}>
          查看此分类下更多药品
        </button>
      </div>

      {/*为你推荐模块 */}
      <div className={styles.ForyouBox}>
        {/* 为你推荐 */}
        <div className={styles.Foryou_title}>
          <h2>为你推荐</h2>
        </div>
        {/* 为你推荐数据列表 */}
        <div className={styles.Foryou_list}>
          <div style={{ width: '100%', height: '100%', marginLeft: '5%' }}>
            {
              foryouList.map((item: ForYou, index) => (
                <div onClick={() => toforyouxiang(item)} key={index} style={{ borderBottom: '1px solid #f4f4f4', marginTop: '10px', width: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                  <h3 style={{ marginBottom: '10px', fontWeight: 'bold' }}>{item.texttitle}</h3>
                  <p className={styles.textdescword}>{item.textdescword}</p>
                  <div style={{ display: 'flex', justifyContent: 'space-evenly',  marginTop: '10px', }}>
                    <img className={styles.avatars} src={item.doctorimage} alt="" />
                    <p className={styles.doctorname}>{item.doctorname}</p>
                    <p className={styles.doctorstate}>{item.doctorstate}</p>
                    <p className={styles.texts}>{item.texttype}</p>
                  </div>
                </div>
              ))
            }
          </div>
        </div>
      </div>
    </div>
  );
};

export default Index;
